<template>
  <el-dialog :visible.sync="warningVisible" @close="destroyElement"
             :width="width"
             :show-close="showClose"
             :close-on-click-modal="showClose"
             :close-on-press-escape="showClose"
  >
    <div class="message-tip">
      <div class="message-tip__icon">
        <svg-icon :icon-class="`modal-${type}`"></svg-icon>
      </div>
      <div class="message-tip__title" v-if="title">
        {{title}}
      </div>
      <div class="message-tip__message">
        <slot name="message">
          {{message}}
        </slot>
      </div>
      <div class="message-tip__go-to">
        <slot name="goTo">
          {{goTo}}
        </slot>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'message-tip',

    data() {
      return {
        warningVisible: true,
        type: 'warning',
        closed: false,
        width: consts.DIALOG_SIZE_NORMAL,
        title: '',
        showClose: true,
        message: '',
        goToIcon: '',
        goTo: '',
      };
    },


    watch: {
      closed(newVal) {
        if (newVal) {
          this.warningVisible = false;
        }
      }
    },

    methods: {
      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },
      destroyElement() {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },
    }
  };
</script>

<style lang="scss" scoped>
  @include b(message-tip) {
    display: flex;
    flex-flow: column;
    align-items: center;
    @include e(icon) {
      flex: 1 0 0;
      margin-bottom: 20px;
      .svg-icon {
        width: 90px;
        height: 90px;
      }
    }

    @include e(title) {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    @include e(message) {
      width: 100%;
      flex: 1 0 0;
      margin-bottom: 60px;
      color: $--color-black;
      text-align: center;
      line-height: 22px;
    }

    @include e(go-to) {
      width: 100%;
      flex: 1 0 0;
      text-align: center;
    }
  }

</style>